<template>
	<view class="content">
		<view class="content-1">
			<!-- <image :class="{'image-1':type == 'process','image-2':type != 'process'}" src="../../static/image/titlepic02.png" mode="widthFix"></image> -->
			<view class="content-1-1">
				{{info.title}}
			</view>
		</view>
		<view class="content-2" v-if="type == 'supervise'">
			<view class="item" v-for="(item,index) in info.content" :key="index">
				<view class="item-1 flex">
					<view class="item-1-1">
						0{{index+1}}
					</view>
					<view class="item-1-2">
						{{item.name}}
					</view>
				</view>
				<view class="item-2 flex">
					<view class="item-2-1">
					</view>
					<view class="item-2-2">
						{{item.des}}
					</view>
				</view>
			</view>
		</view>
		<view class="content-3" v-else>
			<view class="item" v-for="(item,index) in info.content" :key="index">
				<view class="item-1 flex">
					<view class="item-1-1">
						0{{index+1}}
					</view>
					<view class="item-1-2">
					</view>
					<view class="item-1-3">
						{{item.name}}
					</view>
				</view>
				<view class="item-2">
					{{item.des}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			infos:{
				supervise:{
					title:'代缴流程',
					content:[
						{name:'监控专利',des:'用户将有效专利添加至专利监管'},
						{name:'缴费提醒',des:'需要交费的专利会消息提醒业务人员'},
						{name:'支付年费',des:'客户支付代缴服务费和官费'},
						{name:'代缴年费',des:'我司人员将年费上交国知局'},
						{name:'缴费完成',des:'跟进代缴过程，并将票据寄送给客户'},
						{name:'年费监控',des:'对每年的专利年费进行维护'}
					]
				},
				answer:{
					title:'专利申请复审的作用',
					content:[
						{name:'应对驳回',des:'专利申请复审是救济被驳回的的唯一途径，权利尚未用尽，不能放弃'},
						{name:'增加成功的机会',des:'专利局审查人员驳回专利申请带有一定主观性，被驳回复审成功概率比较高'},
						{name:'彰显软实力',des:'专利是一种无形资产和无形宣传，专利申请复审的成功有助于企业价值的增加，彰显企业的软实力'}
					]
				}
			},
			info:{}
		};
	},
	created() {
		this.info = this.infos[this.type]
	},
	props:['type']
}
</script>

<style lang="scss" scoped>
.content {
	background: #fff;
	padding: 32rpx 35rpx 40rpx 20rpx;
	margin-top: 20rpx;
	.content-1 {
		position: relative;
		height: 32rpx;
		image {
			position: absolute;
			top: 18rpx;
			height:18rpx;
			width: 158rpx;
		}
	}
	.content-1-1 {
		position: absolute;
		font-size: 32rpx;
		color: $uni-color-middle;
		background-image: linear-gradient(90deg, 
		#f6e57f 0%, 
		#fd8261 100%);
	}
	.content-2 {
		margin-top: 38rpx;
		flex-wrap: wrap;
		.item {
			margin-left: 56rpx;
			margin-bottom: 40rpx;
			font-size: 28rpx;
			.item-1 {
				color: $uni-color-top;
			}
			
			.item-1-2 {
				margin-top: -4rpx;
				font-size: 32rpx;
				margin-left: 46rpx;
			}
			.item-2 {
				margin-left: 18rpx;
				color: $uni-color-botton;
				margin-top: 22rpx;
			}
			.item-2-1 {
				width: 1rpx;
				height: 50rpx;
				border: dotted 1rpx #c9c9c9;
			}
			.item-2-2 {
				margin-left: 46rpx;
			}
		}
	}
	.content-3 {
		margin-top: 38rpx;
		flex-wrap: wrap;
		.item {
			margin-left: 36rpx;
			font-size: 28rpx;
			margin-bottom: 55rpx;
			.item-1 {
				color: $uni-color-top;
			}
			
			.item-1-2 {
				width: 1rpx;
				height: 32rpx;
				background: #999;
				transform: rotate(20deg);
				margin: 0 16rpx;
				margin-top: 4rpx;
			}
			
			.item-1-3 {
				margin-top: -4rpx;
				font-size: 32rpx;
			}
			.item-2 {
				color: $uni-color-botton;
				margin-top: 22rpx;
			}
		}
	}
}
</style>